<template>
  <el-card class="setUsers_box" v-loading="isAjaxing">
    <div>
      <el-button type="primary" size="mini" @click="dialogShow=true;dialogTitle='添加管理员'"><i class="el-icon-plus"></i> 新增</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column label="ID" prop="id" width="80"></el-table-column>
      <el-table-column label="用户名" prop="name"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="更新时间" prop="update_time"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button size="mini" type="primary" @click="editShow(row)">修改</el-button>
          <el-popconfirm
            title="确认要删除该管理员账号吗？"
            @confirm="confirmDelete([row.id])"
          >
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="filter.page"
      :page-sizes="[10, 50, 100, 150]"
      :page-size="filter.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
  <el-dialog v-model="dialogShow" :title="dialogTitle">
    <el-form :model="dialogForm" :rules="rules" ref="dialogRef">
      <el-form-item label="管理员名称" prop="name">
        <el-input v-model="dialogForm.name" placeholder="请输入管理员名称"></el-input>
      </el-form-item>
      <el-form-item label="管理员账号" prop="email">
        <el-input v-model="dialogForm.email" placeholder="请输入管理员账号"></el-input>
      </el-form-item>
      <el-form-item label="管理员密码" prop="password">
        <el-input v-model="dialogForm.password" placeholder="请输入管理员密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button size="small" type="default" @click="dialogShow = false">取消</el-button>
      <el-button size="small" type="primary" @click="confirmPost" :loading="isSubmit">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue'
import { getAdmins,addAdmin, deleteAdmin, editAdmin } from '../../../axios/adminRequest'
import { computedPage } from '../../../utils/utils'

export default {
  name: 'setUsers',
  setup(){
    let { proxy } = getCurrentInstance()
    const state = reactive({
      dialogShow:false,
      isSubmit:false,
      isAjaxing:true,
      filter:{
        page:1,
        limit:10
      },
      total:0,
      dialogTitle:'添加管理员',
      tableData:[],
      dialogForm:{
        name:'',
        email:'',
        password:''
      },
      editId:'',
      rules:{
        name:[{required:true,message:'请输入管理员名称',trigger:'blur'}],
        email:[{required:true,message:'请输入管理员账号',trigger:'blur'}],
        password:[{required:true,message:'请输入管理员密码',trigger:'blur'}],
      }
    })

    const getAdminFun = ()=>{
      state.isAjaxing = true
      getAdmins().then(data=>{
        if(data.code == 0){
          state.total = data.data.total
          state.tableData = data.data.data
        }else{
          proxy.$message.error(data.msg)
        }
        state.isAjaxing = false
      })
    }
    getAdminFun()


    const handleSizeChange = (pageSize)=>{
      state.filter.page = 1
      state.filter.limit = pageSize
      getAdminFun()
    }

    const handleCurrentChange = (page)=>{
      state.filter.page = page
      getAdminFun()
    }

    const confirmDelete = (id) => {
      state.isAjaxing = true
      deleteAdmin(id).then(res=>{
        if(res.code == 0){
          proxy.$message.success('删除成功')
          state.filter.page = computedPage(id.length,state.filter.page,state.filter.limit,state.total)
          getAdminFun()
        }else{
          state.isAjaxing = false
          proxy.$message.error(res.msg)
        }
      })
    }

    const confirmPost = ()=>{
      proxy.$refs.dialogRef.validate(bool=>{
        if(bool){
          let result;
          if(state.dialogTitle=='添加管理员'){
            result = addAdmin(state.dialogForm)
          }else{
            result = editAdmin(state.editId,state.dialogForm)
          }
          state.isSubmit = true
          result.then(res=>{
            if(res.code == 0){
              proxy.$message.success('操作成功')
              proxy.$refs.dialogRef.resetFields()
              state.dialogShow = false
              getAdminFun()
            }else{
              proxy.$message.error(res.msg)
            }
            state.isSubmit = false
          })
        }
      })
    }

    const editShow = (row)=>{
      state.dialogShow = true;
      state.dialogTitle ='修改管理员';
      state.editId = row.id
      state.dialogForm.email = row.email
      state.dialogForm.password = row.password
      state.dialogForm.name = row.name
    }

    return {
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
      confirmDelete,
      confirmPost,
      editShow
    }
  }
}
</script>

<style lang="less" scoped>
.setUsers_box{
  min-height: 100%;
  .el-table{
    &:deep(.el-table__row){
      .cell{
        font-size: 12px;
      }
    }
  }
}
</style>
